import React, { useState, useEffect } from 'react';
import DialogSimple from './DialogSimple';
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";



// props.isOpen
// props.onCancel
// props.onOk
// props.lyrParams
function DialogSimpleScriptEditor(props) {

    const [scriptTitle, setScriptTitle] = useState("") ;
    const [scriptText, setScriptText] = useState("") ;

    const onAceChange = function (newValue) {
        setScriptText(newValue) ;
    }



    const httpGetScriptText = function() {
        // let url1 = global.g_staticResourceRoot + props.lyrParams.jsfile ;
        let url1 = global.g_serverAPIRoot + "scripts/content/?sid="+props.lyrParams.productDisplay.dpid
        +"&utime="+Date.now() ;
        fetch(url1)  //GET
        .then(response=>response.json())
        .then(result => {
            setScriptText(result.data) ;
        }).catch(err=> {
            console.log(err) ;// 505 404 ... errors
        });
    }



    useEffect(() => {
        
        if( props.lyrParams!==null && 
            typeof props.lyrParams.productDisplay !== 'undefined'){
            setScriptTitle( props.lyrParams.productDisplay.productname ) ;
            httpGetScriptText() ;
        }
        
    }, [props.lyrParams])
    


    const httpUpdateScript = function() {
        let title1 = scriptTitle ;
        if( title1.length > 100 ) title1 = title1.substring(0,100) ;
        let text1 = scriptText ;
        //max 20k script
        if( text1.length > 1024*20 ) {
            window.alert("脚本超过20000个字符，请修改脚本重新提交。");
            return ;
        }

        let formData = new FormData();
        formData.append('title' , title1 ) ;
        formData.append('sid' , props.lyrParams.productDisplay.dpid ) ;
        formData.append('text', text1);//
        const url = global.g_serverAPIRoot + "scripts/update"
        fetch(
            url,
            {
                method: 'POST',
                body: formData,
            }
        )
        .then((response) => response.json())
        .then((result) => {
            const utime1 = result.data ;
            props.onOk(props.lyrParams , utime1) ;
        }).catch(err=> {
            console.log(err) ;// 505 404 ... errors
        }) ;
        
    }



    const onOk = function(){

        httpUpdateScript() ;
    }


    const renderContent = function() {
        return (
            <div style={{height:'100%'}}>
                <div style={{paddingTop:'4px',paddingBottom:'4px'}}>
                    <input style={{width:'100%'}} size='sm' placeholder='请输入脚本标题' 
                    value={scriptTitle}
                    onChange={(ev)=>setScriptTitle(ev.target.value)} />
                </div>
                <AceEditor
                    fontSize='16px'
                    mode="javascript"
                    theme="github"
                    onChange={onAceChange}
                    name="ace_editor_id"
                    width='638px'
                    height='334px'
                    value={scriptText}
                />
            </div>
        )
    }


    return (
        <DialogSimple 
        isOpen={props.isOpen} 
        onCancel={props.onCancel} 
        dialogTitle={scriptTitle} 
        onOk={onOk} 
        renderContent={renderContent} />
    )
}

export default DialogSimpleScriptEditor